<template>
  <view class="commission_wrapper">
    <view class="header_">
		<view class="topzj_"  @tap="gofunddetails">
			<image src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230719/f98ce73635754c71961ecb33aa2c46ed.png"></image>
		</view>
      <image src="/static/commission/9.png"></image>
      <view class="header_wrapper">
        <!--        <image-->
        <!--          @tap="recordFn"-->
        <!--          class="img_1"-->
        <!--          src="/static/commission/7.png"-->
        <!--        ></image>-->
        <image class="img_2" src="https://www.ylnumber.cn/file/test/productImage/20230713/e68ebaec97a84b5aba05d5d580a2a35d.png"></image>
        <view class="Withdrawal_wrapper">
          <view class="top_wrapper">
            <view class="left_">
              <text>可提现金额</text>
              <view
                >￥<text> {{ userInfoServer.usableMoney || 0 }} </text>
              </view>
            </view>
            <view class="right_">
             <!-- <view @tap="transferAccounts(userInfoServer.usableMoney)"
                >转账</view
              > -->
              <view @tap="withdrawalFn(userInfoServer.usableMoney)">提现</view>
            </view>
          </view>
          <image src="/static/commission/2.png"></image>
          <view class="footer_wrapper">
            <view class="left_">
              <view>
                <view class="item_1">
                  累计收益
                  <image src="/static/commission/1.png"></image>
                </view>
                <view class="item_2">
                  ￥<text>{{ userInfoServer.income || 0 }}</text>
                </view>
              </view>
            </view>
            <image src="/static/commission/6.png"></image>
            <view class="left_ right_">
              <view>
                <view class="item_1">
                  待结算收益
                  <image src="/static/commission/1.png"></image>
                </view>
                <view class="item_2">
                  ￥<text>{{ userInfoServer.frozenCapital || 0 }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="record_wrapper">
			  <!-- 隐藏先 -->
			  <view>
			  </view>
            <!-- <view @tap="recordFn('transfer')"><image src="/static/commission/13.png" mode=""></image>转账记录 >></view> -->
            <view @tap="recordFn('Withdrawal')"><image src="/static/commission/12.png" mode="">提现记录 >></view>
          </view>
        </view>
      </view>
    </view>
    <view class="content_">
      <view class="title_">
        <view class="title_item_1">
          <view class="active">佣金明细</view>
          <!--          <view-->
          <!--            v-for="(item, index) in titleList"-->
          <!--            :key="item"-->
          <!--            @tap="titleNavFn(index)"-->
          <!--            :class="titleIndex == index ? 'active' : ''"-->
          <!--            >{{ item }}</view-->
          <!--          >-->
        </view>
        <view class="title_item_2">
          <u-input
            v-model="value"
            :type="type"
            :select-open="pickerShow"
            :border="border"
            @click="pickerShow = true"
            :placeholder="value"
            class="input_"
          />
          <!-- <u-select
            v-model="pickerShow"
            :list="pickerList"
            :safe-area-inset-bottom="true"
            @confirm="confirmFn"
            @cancel="cancelFn"
            :title="'销售金额类型'"
            class="u-select_wrapper"
          ></u-select> -->
          <!--          <u-dropdown>-->
          <!--            <u-dropdown-item-->
          <!--              v-model="value1"-->
          <!--              title="销售金额类型"-->
          <!--              :options="options1"-->
          <!--            ></u-dropdown-item>-->
          <!--          </u-dropdown>-->
        </view>
      </view>
      <!--    商品佣金  -->
      <!--      <view v-if="titleIndex === 0" class="content_wrapper">-->
      <!--        &lt;!&ndash;      选择状态  &ndash;&gt;-->
      <!--        <view class="nav_wrapper">-->
      <!--          <view-->
      <!--            class="item_"-->
      <!--            :class="navToggle === index ? 'active' : ''"-->
      <!--            v-for="(item, index) in navList"-->
      <!--            :key="index"-->
      <!--            @click="navSelectedFn(item, index)"-->
      <!--          >-->
      <!--            <view>{{ item.text }}</view>-->
      <!--            <image-->
      <!--              v-if="navToggle === index"-->
      <!--              src="/static/commission/5.png"-->
      <!--            ></image>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--        &lt;!&ndash;      收益时间  &ndash;&gt;-->
      <!--        &lt;!&ndash;        <view class="revenue_time">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <view class="item_1">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <image src="/static/commission/10.png"></image>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <view>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view> 到账收益 </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view> ￥200.00 </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;          <view class="item_2">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <view class="top_">&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view> 待结算收益 </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view> ￥200.00 </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <view class="time-wrapper">&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view>&ndash;&gt;-->
      <!--        &lt;!&ndash;                <image src="/static/commission/11.png"></image>&ndash;&gt;-->
      <!--        &lt;!&ndash;                <text>收益时间</text>&ndash;&gt;-->
      <!--        &lt;!&ndash;              </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <view> 2023-10-10至2023-10-17 </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;      明细数据  &ndash;&gt;-->
      <!--        <scroll-view-->
      <!--          :scroll-top="scrollTop"-->
      <!--          scroll-y="true"-->
      <!--          class="scroll-Y"-->
      <!--          @scrolltoupper="upper"-->
      <!--          @scrolltolower="lower"-->
      <!--          @scroll="scroll"-->
      <!--          calss="scroll_wrapper"-->
      <!--        >-->
      <!--          <block>-->
      <!--            <view class="commission_detail">-->
      <!--              <view class="none_list_wrapper" v-if="list.length === 0">-->
      <!--                <view class="none_list">-->
      <!--                  <image src="/static/None/None_list.png"></image>-->
      <!--                  <text>暂无数据喔~</text>-->
      <!--                </view>-->
      <!--              </view>-->
      <!--              <view-->
      <!--                class="item_wrapper"-->
      <!--                v-if="list.length > 0"-->
      <!--                v-for="(item, index) in list"-->
      <!--                :key="index"-->
      <!--              >-->
      <!--                <view class="header_main">-->
      <!--                  <image-->
      <!--                    v-if="item.status == 1"-->
      <!--                    src="/static/commission/3.png"-->
      <!--                  ></image>-->
      <!--                  <image-->
      <!--                    v-if="item.status != 1"-->
      <!--                    src="/static/commission/4.png"-->
      <!--                  ></image>-->
      <!--                  <view class="header_wrapper">-->
      <!--                    <view class="left_">-->
      <!--                      <image :src="item.memberInfo.avatar"></image>-->
      <!--                      <text>{{ item.memberInfo.nickName }}</text>-->
      <!--                    </view>-->
      <!--                    <view class="right_">-->
      <!--                      {{-->
      <!--                        Number(item.status) === 0-->
      <!--                          ? "待结算"-->
      <!--                          : Number(item.status) === 1-->
      <!--                          ? "已到账"-->
      <!--                          : Number(item.status) === 2-->
      <!--                          ? "订单取消"-->
      <!--                          : ""-->
      <!--                      }}-->
      <!--                    </view>-->
      <!--                  </view>-->
      <!--                </view>-->
      <!--                <view class="info_wrapper">-->
      <!--                  <image :src="httpUrlFn(item.sku.pic)"></image>-->
      <!--                  <viiew class="right_">-->
      <!--                    <view class="top_wrapper">-->
      <!--                      <view> {{ item.sku.prodName }} </view>-->
      <!--                      <view>￥{{ item.sku.price }}</view>-->
      <!--                    </view>-->
      <!--                    <view class="footer_wrapper">-->
      <!--                      <view> {{ item.sku.skuName }} </view>-->
      <!--                      <view>×{{ item.orderItem.quantity }}</view>-->
      <!--                    </view>-->
      <!--                  </viiew>-->
      <!--                </view>-->
      <!--                <view class="money_wrapper">-->
      <!--                  <view class="item_1">-->
      <!--                    <view>-->
      <!--                      类型:-->
      <!--                      {{-->
      <!--                        item.type === 0-->
      <!--                          ? "正常配比佣金"-->
      <!--                          : item.type === 1-->
      <!--                          ? "直邀销售佣金"-->
      <!--                          : item.type === 2-->
      <!--                          ? "销售奖励"-->
      <!--                          : item.type === 3-->
      <!--                          ? "伯乐奖励"-->
      <!--                          : item.type === 22-->
      <!--                          ? "销售团队佣金"-->
      <!--                          : ""-->
      <!--                      }}-->
      <!--                    </view>-->
      <!--                    <view>-->
      <!--                      金额: <text>￥{{ item.orderItem.price }}</text>-->
      <!--                    </view>-->
      <!--                  </view>-->
      <!--                  <view class="item_2">-->
      <!--                    <view> 订单编号:{{ item.orderItem.orderSn }} </view>-->
      <!--                    <view> {{ item.memberInfo.createTime }} </view>-->
      <!--                  </view>-->
      <!--                </view>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </block>-->
      <!--        </scroll-view>-->
      <!--        <u-loadmore-->
      <!--          v-if="list.length > 0"-->
      <!--          :status="status"-->
      <!--          :icon-type="iconType"-->
      <!--          :load-text="loadText"-->
      <!--          @loadmore="loadNextFn"-->
      <!--        />-->
      <!--      </view>-->
      <!--    礼品佣金  -->
      <view class="content_wrapper">
        <!--      选择状态  -->
        <view class="nav_wrapper">
          <view
            class="item_"
            :class="navToggle === index ? 'active' : ''"
            v-for="(item, index) in navList"
            :key="index"
            @click="navSelectedFn(item, index)"
          >
            <view>{{ item.text }}</view>
            <image
              v-if="navToggle === index"
              src="/static/commission/5.png"
            ></image>
          </view>
        </view>
        <!--      收益时间  -->
        <!--        <view class="revenue_time">-->
        <!--          <view class="item_1">-->
        <!--            <image src="/static/commission/10.png"></image>-->
        <!--            <view>-->
        <!--              <view> 到账收益 </view>-->
        <!--              <view> ￥200.00 </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--          <view class="item_2">-->
        <!--            <view class="top_">-->
        <!--              <view> 待结算收益 </view>-->
        <!--              <view> ￥200.00 </view>-->
        <!--            </view>-->
        <!--            <view class="time-wrapper">-->
        <!--              <view>-->
        <!--                <image src="/static/commission/11.png"></image>-->
        <!--                <text>收益时间</text>-->
        <!--              </view>-->
        <!--              <view> 2023-10-10至2023-10-17 </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->
        <!--      明细数据  -->
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
          calss="scroll_wrapper"
        >
          <block>
            <view class="commission_detail">
              <view class="none_list_wrapper" v-if="list2.length === 0">
                <view class="none_list">
                  <image src="/static/None/None_list.png"></image>
                  <text>暂无数据喔~</text>
                </view>
              </view>
              <view
                class="item_wrapper"
                v-for="(item2, index) in list2"
                :key="index"
              >
                <view class="header_main">
                  <image
                    v-if="item2.status == 1"
                    src="/static/commission/3.png"
                  ></image>
                  <image
                    v-if="item2.status !== 1"
                    src="/static/commission/4.png"
                  ></image>
                  <view class="header_wrapper">
                    <view class="left_">
                      <!-- <image :src="item2.memberInfo.avatar"></image> -->
                      <text>{{ item2.memberInfo.phone?item2.memberInfo.phone:'' }}</text>
                    </view>
                    <view
                      class="right_"
                      :class="item2.status === 1 ? 'success' : ''"
                    >
                      {{
                        item2.status === 0
                          ? "待结算"
                          : item2.status === 1
                          ? "已到账"
                          : item2.status === 2
                          ? "订单取消"
                          : ""
                      }}
                    </view>
                  </view>
                </view>
                <view class="info_wrapper">
                  <image :src="httpUrlFn(item2.sku.pic)"></image>
                  <viiew class="right_">
                    <view class="top_wrapper">
                      <view> {{ item2.sku.prodName }} </view>
                      <view>￥{{ item2.sku.price }}</view>
                    </view>
                    <view class="footer_wrapper">
                      <view> {{ item2.sku.skuName }} </view>
                      <view>×{{ item2.orderItem.quantity }}</view>
                    </view>
                  </viiew>
                </view>
                <view class="money_wrapper">
                  <view class="item_1">
                    <view v-if="item2.orderType==1">
                      类型:
                      {{
                        item2.type == 0
                          ? "商品佣金"
                          : item2.type == 1
                          ? "销售佣金"
                          : item2.type == 2
                          ? "销售奖励"
						  : item2.type == 3
						  ? "伯乐奖励"
						  : item2.type == 22
						  ? "销售团队佣金"
                          : ""
                      }}
                    </view>
					<view v-if="item2.orderType==2">
					  类型:升级补贴
					</view>
                    <view>
                      金额: <text>￥{{ item2.money}}</text>
                    </view>
                  </view>
                  <view class="item_2">
                    <view> 订单编号: {{ item2.orderItem.orderSn }} </view>
                    <view>
                      {{
                        item2.memberInfo.createTime
                          .toLocaleString()
                          .replace(/T/g, " ")
                          .replace(/Z/g, "")
                      }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
        <u-loadmore
          v-if="list2.length > 0"
          :status="status"
          :icon-type="iconType"
          :load-text="loadText"
          @loadmore="loadNextFn"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getmenberBonus, getMenberBrokerage } from "@/api/commission";
import { BASE_URL_IMAHE } from "../../../../utils/https";
// import { getUserByIdApi } from "@/api/login/login";

export default {
  name: "index",
  data() {
    return {
      userId: "",
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      navList: [
        //"全部", "近7天", "近1个月", "近3个月"
        {
          text: "全部",
          time: "",
        },
        {
          text: "近7天",
          time: -7,
        },
        {
          text: "近1个月",
          time: -30,
        },
        {
          text: "近3个月",
          time: -90,
        },
        // {
        //   text: "自定义",
        //   time: 0,
        // },
      ],
      //保存导航的索引
      navToggle: 0,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      //商品数据
      list: [],
      //礼品数据
      list2: [],
      titleList: ["商品佣金", "礼包佣金"],
      titleIndex: 0,
      //销售
      saleParams: {
        size: 10,
        current: 1,
      },
      //销售/商品
      saleData: {
        //记录时间
        recTime: "",
        //用户id
        menberId: "",
        //类型
        type: "",
      },
      //礼包
      PackParams: {
        size: 10,
        current: 1,
      },
      //礼包
      PackData: {
        //记录时间
        createTime: "",
        //用户id
        memberId: "",
        //类型
        orderType: "",
		
		// type: "",
      },
      value: "全部",
      type: "select",
      border: false,
      pickerShow: false,
      pickerList: [
        {
          value: "-1",
          label: "全部",
        },
		
		{
		  value: "1",
		  label: "商品销售佣金 ",
		},
		{
		  value: "2",
		  label: "礼包销售佣金",
		},
		{
		  value: "3",
		  label: "积分销售佣金",
		},
        // {
        //   value: "0",
        //   label: "商品佣金 ",
        // },
        // {
        //   value: "1",
        //   label: "直邀销佣金",
        // },
        // {
        //   value: "2",
        //   label: "销售奖励",
        // },
        // {
        //   value: "3",
        //   label: "伯乐奖励",
        // },
        // {
        //   value: "22",
        //   label: "销售团队佣金",
        // },
      ],
      userInfoServer: "",
    };
  },
  onShow() {
    this.userId = uni.getStorageSync("userId") || "";
    //获取商品佣金列表 //旧接口现在不用了
    // this.getMenberBrokeragePage();
    this.userInfoServer = uni.getStorageSync("userInfoServer")
      ? uni.getStorageSync("userInfoServer")
      : "";
    //获取全部佣金
    this.getmenberBonus();
    //更新用户数据
    this.userList()
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.getmenberBonus();
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.userList();
  },
  methods: {
    //日期时间
    ShowIndex(e) {
      console.log(e, "日期");
    },
	//去资金明细
	gofunddetails(){
		// ?income=${
		//   usableMoney || 0
		// }`
		uni.navigateTo({
		  url: `/pages/subpackage/funddetails/index`,
		});
		
	},

    //更新用户等级数据
    async userList() {
      if (uni.getStorageSync("token")) {
        const res = await getUserByIdApi();
        if (res.code === 0) {
          this.userInfoServer = res.data;
          uni.setStorageSync("userInfoServer", res.data);
          //关闭加载动画
          uni.stopPullDownRefresh();
          uni.hideLoading();
        }
      } else {
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
      }
    },

    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    //跳转到转账页面
    transferAccounts(usableMoney) {
      console.log(usableMoney, "数据");
      uni.navigateTo({
        url: `/pages/subpackage/transferAccounts/index?income=${
          usableMoney || 0
        }`,
      });
    },

    //跳转到提现页面
    withdrawalFn(usableMoney) {
      console.log(usableMoney, "数据");
      uni.navigateTo({
        url: `/pages/subpackage/Withdrawal/index?income=${usableMoney || 0}`,
      });
    },
    //提现记录
    recordFn(str) {
      if (str === "Withdrawal") {
        uni.navigateTo({
          url: "/pages/subpackage/Withdrawal_record/index",
        });
      } else {
        uni.navigateTo({
          url: "/pages/subpackage/transferAccounts/record",
        });
      }
    },

    //销售金额类型选择
    confirmFn(e) {
      console.log(e, "销售金额类型选择");
      this.value = e[0].label;
      if (e[0].value === "-1") {
        // this.PackData.type = "";
		this.PackData.orderType = "";
      } else {
        // this.PackData.type = +e[0].value;
		this.PackData.orderType = +e[0].value;
		
      }
      this.PackParams.current = 1;
      this.list2 = [];
      this.getmenberBonus();
    },
    //
    cancelFn(e) {
      console.log(e, "cancelFn");
    },

    //获取最近7天日期

    // getDay(0);//当天日期
    //
    // getDay(-7);//7天前日期
    //
    // //获取最近3天日期
    //
    // getDay(0);//当天日期
    //
    // getDay(-3);//3天前日期

    getDay(day) {
      var today = new Date();

      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

      today.setTime(targetday_milliseconds); //注意，这行是关键代码

      var tYear = today.getFullYear();

      var tMonth = today.getMonth();

      var tDate = today.getDate();

      tMonth = this.doHandleMonth(tMonth + 1);

      tDate = this.doHandleMonth(tDate);

      return tYear + "-" + tMonth + "-" + tDate;
    },

    doHandleMonth(month) {
      var m = month;

      if (month.toString().length == 1) {
        m = "0" + month;
      }

      return m;
    },

    //导航
    navSelectedFn(item, index) {
      this.navToggle = index;
      console.log(index, "index");
      this.PackParams.current = 1;
      this.list2 = [];
      if (index === 4) {
        //点击了自定义按钮
        console.log(item, "item");
        return;
      }
      //礼品列表查询
      if (index !== 0) {
        const time = this.getDay(item.time);
        const data = new Date(time).getTime();
        this.saleData.recTime = data;
        this.PackData.createTime = data;
      } else {
        this.saleData.recTime = "";
        this.PackData.createTime = "";
      }
      this.getmenberBonus();
      console.log(this.PackData, "PackData");
    },

    //商品佣金获取列表接口
    // async getMenberBrokeragePage() {
    //   this.status = "loading";
    //   this.saleData.menberId = this.userId;
    //   const res = await getMenberBrokerage(this.saleParams, this.saleData);
    //   console.log(res, "商品");
    //   if (res.code === 0) {
    //     this.list.push(...res.data.records);
    //     console.log(this.list, "this.listRecords");
    //
    //     if (res.data.records.length === 0) {
    //       setTimeout(() => {
    //         this.status = "nomore";
    //       }, 800);
    //       return;
    //     }
    //
    //     if (res.data.records.length >= this.saleParams.size) {
    //       this.saleParams.current++;
    //        setTimeout(() => {
    //         this.status = "loadmore";
    //       }, 800);
    //       return;
    //     }
    //
    //     if (this.list.length <= this.saleParams.size) {
    //       this.saleParams.current++;
    //       setTimeout(() => {
    //         this.status = "loadmore";
    //       }, 800);
    //     } else if (
    //       res.data.records.length !== 0 &&
    //       res.data.records.length < this.saleParams.size
    //     ) {
    //       this.saleParams.current++;
    //        setTimeout(() => {
    //         this.status = "loadmore";
    //       }, 800);
    //       return;
    //     }
    //   }
    // },

    //礼品用户获取列表接口
    async getmenberBonus() {
      this.status = "loading";
      console.log(this.userId, "this.userId");
      this.PackData.memberId = this.userId;
      const res = await getmenberBonus(this.PackParams, this.PackData);
      console.log(res, "礼品佣金");
      if (res.code === 0) {
        this.list2.push(...res.data.records);
        console.log(this.list2, "this.listRecords");

        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.PackParams.size) {
          this.PackParams.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.list2.length <= this.PackParams.size) {
          this.PackParams.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.PackParams.size
        ) {
          this.PackParams.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
      }
    },

    //佣金类型切换
    titleNavFn(index) {
      console.log(index, "index");
      this.getmenberBonus();
    },

    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      this.getmenberBonus();
    },

    upper: function (e) {
      console.log(e);
    },
    lower: function (e) {
      console.log(e);
    },

    //滚动
    scroll(e) {
      console.log(e, "e");
      this.old.scrollTop = e.detail.scrollTop;
    },
  },
};
</script>

<style scoped lang="scss">
//.scroll-Y {
//  height: 300rpx;
//}
//.scroll-view_H {
//  white-space: nowrap;
//  width: 100%;
//}
//.scroll-view-item {
//  height: 300rpx;
//  line-height: 300rpx;
//  text-align: center;
//  font-size: 36rpx;
//}
//.scroll-view-item_H {
//  display: inline-block;
//  width: 100%;
//  height: 300rpx;
//  line-height: 300rpx;
//  text-align: center;
//  font-size: 36rpx;
//}

.u-select_wrapper::v-deep {
  u-popup {
    .u-drawer-bottom {
      border-top-left-radius: rpx(12);
      border-top-right-radius: rpx(12);
    }
  }
}

.commission_wrapper {
  background: #f5f5f5;
  height: 100vh;
  .header_ {
    padding: rpx(32) rpx(12) rpx(16);
    position: relative;
	>.topzj_{
		position: absolute;
		right: 0;
		top: rpx(4);
		width: rpx(26);
		height: rpx(63);
		z-index: 1;
		>image{
			width: 100%;
			height: 100%;
		}
	}
    > image {
      width: rpx(375);
      height: rpx(136);
      vertical-align: middle;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    > .header_wrapper {
      position: relative;
	  width: auto;
	  height: rpx(197);
      > .img_1 {
        position: absolute;
        top: rpx(8);
        right: 0;
        width: rpx(58);
        height: rpx(26);
        z-index: 99;
      }
      > .img_2 {
        width: rpx(351);
        height: rpx(197);
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: 0;
      }
      > .Withdrawal_wrapper {
        position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
        padding: rpx(24) rpx(20) rpx(10);
        > image {
          width: rpx(311);
          height: rpx(0.5);
        }
        > .top_wrapper {
          display: flex;
          justify-content: space-between;
          > .left_ {
            > text {
              font-size: rpx(13);
              font-weight: 400;
              color: #ffffff;
            }
            > view {
              margin-top: rpx(2);
              font-size: rpx(11);
              font-weight: bold;
              color: #ffffff;
              > text {
                font-size: rpx(17);
              }
            }
          }
          > .right_ {
            display: flex;
            align-items: center;
            > view {
              //margin-top: rpx(16);
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: rpx(15);
              font-weight: 400;
              width: rpx(68);
              height: rpx(30);
              background: #ffd500;
              border-radius: rpx(15);
              color: #720000;
              &:first-child {
                margin-right: rpx(6);
              }
            }
          }
        }
        > .footer_wrapper {
          display: flex;
          position: relative;
          margin-top: rpx(17);
          > .left_ {
            flex: 1;
            > view {
              > .item_1 {
                font-size: rpx(13);
                font-weight: 400;
                color: #ffffff;
                display: flex;
                align-items: center;
                > image {
                  width: rpx(14);
                  height: rpx(14);
                  vertical-align: middle;
                  margin-left: rpx(4);
                }
              }
              > .item_2 {
                margin-top: rpx(2);
                font-size: rpx(9);
                font-weight: bold;
                color: #ffffff;
                > text {
                  font-size: rpx(13);
                }
              }
            }
          }
          > image {
            position: absolute;
            width: rpx(0.5);
            height: rpx(40);
            vertical-align: middle;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          > .right_ {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
        > .record_wrapper {
          position: absolute;
          margin-top: rpx(33);
		  width: 100%;
		  bottom: rpx(10);
		  left: 0;
          display: flex;
		  align-items: center;
          > view {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: rpx(13);
            font-weight: 400;
            color: #af5a00;
			> image{
				width: rpx(16);
				height: rpx(16);
				margin-right: rpx(4);
			}
          }
        }
      }
    }
  }
  > .content_ {
    padding: rpx(0) rpx(12) rpx(0);
    > .title_ {
      display: flex;
      margin-bottom: rpx(12);
      align-items: center;
      justify-content: space-between;
      .title_item_1 {
        display: flex;
        view {
          font-size: rpx(13);
          font-weight: 400;
          color: #353535;
          padding-bottom: rpx(4);
          display: flex;
          align-items: center;
          &.active {
            font-size: rpx(15);
            font-weight: bold;
            color: #353535;
            position: relative;
            //&::after {
            //  content: "";
            //  position: absolute;
            //  bottom: 0;
            //  width: rpx(48);
            //  height: rpx(2);
            //  left: 50%;
            //  transform: translate(-50%);
            //  background: #fa5151;
            //  border-radius: rpx(2);
            //}
          }
        }
        view:first-child {
          margin-right: rpx(16);
        }
      }
      .title_item_2 {
        display: flex;
        align-items: center;
        padding-bottom: rpx(4);
        .input_::v-deep {
          input {
            text-align: right;
          }
        }
      }
    }
    > .content_wrapper {
      > .nav_wrapper {
        display: flex;
        justify-content: space-between;
        > .item_ {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          padding: rpx(5) rpx(16) rpx(5) rpx(16);
          border-radius: rpx(14);
          font-size: rpx(12);
          font-weight: 400;
          color: #353535;
          position: relative;
          view {
            position: relative;
            z-index: 1;
          }
          &.active {
            > view {
              font-size: rpx(13);
              font-weight: bold;
              color: #ffffff;
            }
            > image {
              width: 100%;
              height: 120%;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              vertical-align: middle;
            }
          }
        }
      }

      > .revenue_time {
        margin-top: rpx(13);
        width: rpx(351);
        height: rpx(118);
        background: #ffffff;
        border-radius: rpx(5);
        > .item_1 {
          position: relative;
          > image {
            width: 100%;
            height: rpx(30);
            vertical-align: middle;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
          }
          > view {
            padding: rpx(12) rpx(12) rpx(0);
            position: relative;
            display: flex;
            justify-content: space-between;
            font-size: rpx(13);
            font-weight: 400;
            color: #353535;
          }
        }
        > .item_2 {
          padding: rpx(8) rpx(12) rpx(12);
          view.top_ {
            display: flex;
            justify-content: space-between;
            font-size: rpx(13);
            font-weight: 400;
            color: #353535;
          }
          > .time-wrapper {
            margin-top: rpx(8);
            width: rpx(327);
            height: rpx(42);
            background: #fff9f3;
            border-radius: rpx(5);
            display: flex;
            justify-content: space-between;
            padding: rpx(0) rpx(8);
            > view {
              font-size: rpx(13);
              font-weight: 400;
              color: #353535;
              display: flex;
              align-items: center;
              image {
                width: rpx(16);
                height: rpx(16);
                vertical-align: middle;
                margin-right: rpx(4);
              }
            }
          }
        }
      }

      scroll-view {
        margin-top: rpx(16);
        .commission_detail {
          > .item_wrapper {
            //width: 351px;
            //height: 186px;
            background: #ffffff;
            margin-bottom: rpx(8);
            border-radius: rpx(5);
            > .header_main {
              position: relative;
			  
              > image {
                width: rpx(351);
                height: rpx(42);
                vertical-align: middle;
              }
              .header_wrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                top: 0;
                left: rpx(12);
                right: rpx(12);
                bottom: 0;
                > .left_ {
                  display: flex;
                  align-items: center;
                  > image {
                    width: rpx(18);
                    height: rpx(18);
                    vertical-align: middle;
                    margin-right: rpx(4);
                    border-radius: 50%;
                  }
                  > text {
                    font-size: rpx(13);
                    font-weight: 400;
                    color: #353535;
                  }
                }
                > .right_ {
                  font-size: rpx(13);
                  font-weight: bold;
                  color: #fa5151;
                  &.success {
                    font-size: rpx(13);
                    font-weight: bold;
                    color: #1485ee;
                  }
                }
              }
            }
            > .info_wrapper {
              display: flex;
              margin: rpx(12);
              padding-bottom: rpx(12);
              border-bottom: 1px solid #efefef;
              > image {
                width: rpx(54);
                height: rpx(54);
                vertical-align: middle;
                margin-right: rpx(6);
              }
              > .right_ {
                flex: 1;
                display: flex;
                flex-direction: column;
                > .top_wrapper {
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: rpx(4);
                  view:first-child {
                    font-size: rpx(12);
                    font-weight: 400;
                    color: #353535;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; /*最大行数*/
                  }
                  view:last-child {
                    font-size: rpx(13);
                    font-weight: bold;
                    color: #353535;
                    margin-left: rpx(34);
                  }
                }
                > .footer_wrapper {
                  display: flex;
                  justify-content: space-between;
                  view {
                    font-size: rpx(12);
                    font-weight: 400;
                    color: #888888;
                  }
                }
              }
            }
            > .money_wrapper {
              padding: rpx(12);
              display: flex;
              flex-direction: column;
              > view {
                display: flex;
                justify-content: space-between;
              }
              > .item_1 {
                font-size: rpx(12);
                font-weight: 400;
                color: #353535;
                view {
                  text {
                    color: #fa5151;
                  }
                }
              }
              > .item_2 {
                font-size: rpx(12);
                font-weight: 400;
                color: #b2b2b2;
                margin-top: rpx(8);
              }
            }
          }
          > .none_list_wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
			
            > .none_list {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
			  margin-top: rpx(50);
              > image {
                width: rpx(222);
                height: rpx(158);
                vertical-align: middle;
              }
              > text {
                font-size: rpx(13);
                font-weight: 400;
                color: #b2b2b2;
              }
            }
          }
        }
      }
    }
  }
}
</style>
